<template>
	<div class="my-goods-list">
	<MyTable :arr="list">
		<template #header>

				<th>#</th>
				<th>商品名称</th>
				<th>价格</th>
				<th>标签</th>
				<th>操作</th>
		</template>
		<template #body="scoped">

			<td>{{scoped.obj.id}}</td>
				<td>{{scoped.obj.goods_name}}</td>
				<td>{{scoped.obj.goods_price}}</td>
				<td>
					<div>
						
						<input style="width: 150px" class="tag-input form-control" type="text" v-if="scoped.obj.inputVisible" v-focus v-model="scoped.obj.inputValue" @keyup.esc="scoped.obj.inputValue=''" @blur="scoped.obj.inputVisible=false" @keyup.enter="add(scoped.obj)"/>
						<button class="btn btn-primary btn-sm add-tag" v-else @click="scoped.obj.inputVisible=true">
							+Tag
						</button>
					</div>

				<span v-for="(item,index) in scoped.obj.tags" :key="index" class="badge bg-warning text-dark">{{item}}</span>
				</td>
				<td><button class="btn btn-danger btn-sm" @click="del(scoped.obj.id)">删除</button></td>
		</template>
	</MyTable>
	</div>
</template>

<script>
	// 接口：GTE  https://www.escook.cn/api/goods
import axios from 'axios'
import MyTable from '../components/MyTable.vue'
	export default {
		components:{
			MyTable
		},
		data() {
			return {
				list:[]
			};
		},
async	created(){
	const {data:res}=	await	axios.get('https://www.escook.cn/api/goods')
	console.log(res);
	this.list=res.data
		},
		directives:{
			focus:{
				inserted(el){
					el.focus()
				}
			}
		},
		methods:{
			del(id){
			this.list=	this.list.filter(item=>item.id!==id)
			},
			add(obj){
				if(obj.inputValue===''){
					return
				}
				obj.tags.push(obj.inputValue)
				obj.inputValue=''
			}
		}
	};
</script>

<style>
</style>
